let Vue;

class VueRouter {
  constructor(options) {
    this.$options = options;
    // 创建一个路由的path和route映射
    this.routeMap = {};
    // 将来当前路径current需要响应式
    // 利用Vue响应式原理可以做到只一点
    this.app = new Vue({
      data: {
        current: "/",
      },
    });
  }
  init() {
    // 监听hashchange事件
    this.bindEvents();
    // 保存所有的router
    this.createRouteMap(this.$options);
    // 添加router-link和router-view组件
    this.initComponent();
  }
  bindEvents() {
    window.addEventListener("hashchange", this.onHashChange.bind(this), false);
    // 页面资源加载完成后执行一次
    window.addEventListener("load", this.onHashChange.bind(this), false);
  }
  onHashChange() {
    console.log(this.app)
    this.app.current = window.location.hash.slice(1) || "/";
  }
  createRouteMap(options) {
    options.routes.forEach((item) => {
      this.routeMap[item.path] = item;
    });
  }
  initComponent() {
    Vue.component("router-link", {
      props: {
        to: String,
      },
      render(h) {
        return h("a", { attrs: { href: "#" + this.to } }, this.$slots.default);
      },
    });
    Vue.component("router-view", {
      render: (h) => {
        const Comp = this.routeMap[this.app.current].component;
        // console.log(h(Comp))
        return h(Comp);
      },
    });
  }
}

// 把VueRouter变成一个插件
VueRouter.install = function(_Vue) {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options.router) {
        // 这里的代码将会在外面初始化的时候被调用
        // 实现对Vue的扩展
        // 但是希望只执行一次
        Vue.prototype.$router = this.$options.router;
        this.$options.router.init();
      }
    },
  });
};

export default VueRouter;

